<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <!-- 请选择房间 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.roomList.defaultActive"
          placeholder="请选择房间"
          style="width: 240px"
          @change="roomListSelect"
          :loading="data.loading.loadingRoomList"
        >
          <el-option
            v-for="item in data.roomList.data"
            :key="item.value"
            :label="item.room_name"
            :value="item.room_id"
          />
        </el-select>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      <!-- 速览 -->
      <div class="model quick_view">
        <!-- 标题 -->
        <div class="model_head quick_view_head">
          <div class="quick_view_head_left">速览</div>
          <div class="quick_view_head_right">
            {{ data.quickView.date }}
          </div>
        </div>
        <!-- 速览内容 -->
        <el-row v-loading="data.loading.loadingQuickView" justify="space-evenly" class="model_content quick_view_box">
          <el-col
            :span="data.quickView.quickViewCol"
            v-for="(item, index) in data.quickView.data"
            :key="index"
          >
          <!-- 块标题 -->
            <div class="quick_view_item">
              <div class="quick_view_item_title">
                {{ item.name }}
              </div>
              <!-- 块内容 -->
              <div class="quick_view_item_num">
                {{ item.num }}
                <sub class="quick_view_item_growth_rate">
                  {{ item.growth_rate }}%
                  <el-image
                    style="width: 17px"
                    v-if="item.growth_rate > 0"
                    :src="data.increase_icon_src"
                  />
                  <el-image
                    style="width: 17px"
                    v-if="item.growth_rate < 0"
                    :src="data.decline_icon_src"
                  />
                </sub>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 趋势 -->
      <div class="model trend_box">
        <!-- 趋势 Tab -->
        <div class="model_head trend_box_head">
          <ul class="trend_menu">
            <li
              class="trend_menu_item"
              @click="trendSelect({ index: index, url: item.path ,type: item.type})"
              v-bind:class="{
                trend_menu_item_active: index === data.trend.defaultActive,
              }"
              v-for="(item, index) in data.trend.option"
              :key="index"
            >
              <span>{{ item.label }}</span>
            </li>
          </ul>
        </div>
        <!-- 趋势图表 -->
        <div v-loading="data.loading.loadingTrendContent">
          <div id="trend_content" class="model_content trend_content" v-show="data.charts"></div>
        </div>
      </div>
      <!-- 详细数据 -->
      <div class="model detail_box">
        <div class="model_head detail_box_head">
          详细数据
        </div>
        <!-- 数据内容 -->
        <div v-loading="data.loading.loadingDetailContent" id="detail_content" class="model_content detail_content">
          <el-table :data="data.detail.data" :row-class-name="tableRowClassName" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="barrage_num" label="弹幕量" />
            <el-table-column prop="barrage_send_num" label="弹幕发送人数" />
            <el-table-column prop="gift_num" label="礼物量" />
            <el-table-column prop="gift_send_num" label="礼物发送人数" />
          </el-table>
          <el-pagination
            background
            v-model:current-page="data.getDetailOption.page"
            :page-size="data.getDetailOption.page_size"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.detail.total"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import http from '@/http/http'
import * as echarts from 'echarts'
const data = reactive({
  charts: true,
  roomList: {
    defaultActive: '-',
    data: [
      {
        room_name: '-',
        room_id: '-'
      }
    ]
  },
  quickView: {
    quickViewCol: 6,
    date: '',
    quickView: []
  },
  trend: {
    defaultActive: 0,
    option: [
      {
        label: '弹幕发送时间热点',
        path: '/Index/getHotTimeData',
        type: 0
      },
      {
        label: '礼物发送时间热点（全部）',
        path: '/Index/getHotTimeData',
        type: 1
      },
      {
        label: '礼物发送时间热点（非免费）',
        path: '/Index/getHotTimeData',
        type: 3
      },
      {
        label: '礼物发送时间热点（免费）',
        path: '/Index/getHotTimeData',
        type: 2
      }
    ]
  },
  getDetailOption: {
    page: 1,
    page_size: 10
  },
  detail: {},
  loading: {
    loadingRoomList: true,
    loadingQuickView: true,
    loadingTrendContent: true,
    loadingDetailContent: true
  },
  increase_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWxYR.png',
  decline_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWJXz.png'
})

onMounted(() => {
  setRoomList()
  // myChart = echarts.init(document.getElementById('trend_content')) // 初始化
})
/**
 * 获取并渲染 速览 数据
 */
const setQuickViewData = () => {
  data.loading.loadingQuickView = true
  http
    .request({
      url: '/Index/getQuickViewData',
      data: {
        room_id: data.roomList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.quickView = res.data
        // 根据数据列数决定显示宽度
        data.quickView.quickViewCol =
          (Math.floor(24 / res.data.data.length) - 1 < 4
            ? 4
            : Math.floor(24 / res.data.data.length)) - 1
        data.loading.loadingQuickView = false
      }
    })
}
/**
 * 获取并渲染 房间 数据
 */
const setRoomList = () => {
  data.loading.loadingRoomList = true
  http
    .request({
      url: '/Index/getRoomList',
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.roomList.defaultActive = res.data[0].room_id
        data.roomList.data = res.data
        data.loading.loadingRoomList = false
        setQuickViewData()
        setDetailData(data.getDetailOption)
        setTrendContent(data.trend.option[0].path, data.trend.option[0].type)
      }
    })
}
/**
 * 获取并渲染 趋势图表 数据
 */
const setTrendContent = (url:string, type:number) => {
  data.loading.loadingTrendContent = true
  http.request({
    url: url,
    data: {
      room_id: data.roomList.defaultActive,
      type: type
    },
    method: 'POST'
  })
    .then((res) => {
      if (res.status === 200) {
        data.charts = false
        const myChart = echarts.init(document.getElementById('trend_content')) // 初始化
        myChart.clear()
        /**
         * 当页面大小发生改变时重绘
         */
        window.onresize = function () {
          myChart.resize()
        }
        const info = []
        const series = []
        res.data.forEach((item) => {
          item.data.unshift(item.date)
          info.push(item.data)
          series.push(
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            })
        })
        const option = {
          animationDuration: 5000,
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], // x轴
              ...info
            ]
          },
          xAxis: {
            name: '%',
            type: 'category'
          },
          yAxis: {
            name: 'count'
          },
          series: series
        }
        myChart.setOption(option)
        data.charts = true
        data.loading.loadingTrendContent = false
      }
    })
}
/**
 * 趋势 Tab 切换触发
 */
const trendSelect = (e) => {
  if (data.trend.defaultActive !== e.index) {
    data.trend.defaultActive = e.index
    setTrendContent(e.url, e.type)
  }
}
/**
 * 获取并渲染 详细数据
 */
const setDetailData = () => {
  data.loading.loadingDetailContent = true
  http
    .request({
      url: '/Index/getDetailData',
      data: {
        page: data.getDetailOption.page,
        page_size: data.getDetailOption.page_size,
        room_id: data.roomList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.detail = res.data
        data.loading.loadingDetailContent = false
      }
    })
}
const tableRowClassName = (e) => {
  if (e.row.leave_probability < 0) {
    return 'warning-row'
  }
}
const onPageChange = (e) => {
  data.getDetailOption.page = e
  setDetailData(data.getDetailOption)
}
const onPageSizeChange = (e) => {
  data.getDetailOption.page_size = e
  setDetailData(data.getDetailOption)
}
const roomListSelect = (e) => {
  data.getDetailOption.page = 1
  data.getDetailOption.page_size = 10
  setQuickViewData()
  setTrendContent(data.trend.option[0].path, data.trend.option[0].type)
  setDetailData(data.getDetailOption)
}
</script>

<style lang="scss" scoped>
$shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.1); // 阴影
/**.quick_view_box
    速览 数据
*/
.quick_view_box {
  min-height: 100px;
}
/**.quick_view_item
  速览 数据 子项
 */
.quick_view_item {
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: $shadow;
}
/**.quick_view_item_growth_rate
  速览 数据标题
*/
.quick_view_item_title {
  font-weight: bold;
}
/**.quick_view_item_growth_rate
  速览 数据内容数量
*/
.quick_view_item_num {
  margin: 10px;
  font-size: 25px;
  text-align: center;
}
/**.quick_view_item_growth_rate
  速览 数据涨幅
*/
.quick_view_item_growth_rate {
  font-size: 5px;
}
/**.trend_menu
  趋势菜单
*/
.trend_menu {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}
/**.trend_menu_item
  趋势菜单项
*/
.trend_menu_item {
  cursor: pointer;
  &:hover {
    color: #ccc;
  }
  margin-right: 10px;
}
.trend_menu_item_active {
  color: #ccc;
}
/**.trend_content
  趋势 content
*/
.trend_content {
  width: 100%;
  height: 300px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
